<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>产品信息</title>
<!--引入layui的css  -->
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<!--引入layui的js  -->
<script src="./layui/layui.js" charset="utf-8"></script>
<!--引入jquery的js  -->
<script src="./js/jquery-2.1.1.min.js" charset="utf-8"></script>

<body>
	<!-- 查询条件输入框 -->
	<div class="layui-form-item" style="margin-top: 10px;">
		<form class="layui-form" onsubmit="return false;">
			<label class="layui-form-mid">收货人姓名:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="name" name="name" autocomplete="off" placeholder="请输入收货人姓名"
					class="layui-input">
			</div>
			<label class="layui-form-mid">订单号:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="orderid" name="orderid" autocomplete="off" placeholder="请输入订单号"
					class="layui-input">
			</div>
			<label class="layui-form-mid">状态:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select id="status" name="status">
					<option value="">请选择</option>
					<option value="0">待付款</option>
					<option value="1">待发货</option>
					<option value="2">待收货</option>
					<option value="3">待评价</option>
					<option value="4">已完成</option>
				</select>
			</div>
			<label class="layui-form-mid">创建时间:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="beginCreatetime" name="beginCreatetime"
					placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-mid">--</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="endCreatetime" name="endCreatetime"
					placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline" style="width: 300px;">
				<button class="layui-btn" lay-submit="" lay-filter="search"
					id="search" data-type="reload">
					<i class="layui-icon">&#xe615;</i>搜索
				</button>
				<button class="layui-btn layui-btn-normal" type="reset">
					<i class="layui-icon">&#xe666;</i>重置
				</button>
			</div>
		</form>
	</div>
	
	<!-- 发货的弹层页面  -->
	<div id="shipmentsLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="shipmentsForm" id="shipmentsForm" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">订单的物流信息:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="logisticsMessage" name="logisticsMessage" class="layui-input" lay-verify="required">
					<input type="hidden" id="orderid" name="orderid" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">订单的物流名称:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="logisticsName" name="logisticsName" class="layui-input" lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">订单的物流运费:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="logisticsMoney" name="logisticsMoney" class="layui-input" lay-verify="number">
				</div>
			</div>
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" lay-filter="shipmentsSubmit" lay-submit="">发货提交</button>
			</div>
		</form>
	</div>

	<!-- 修改的弹层页面  -->
	<div id="editLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="editForm" id="editForm" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">收货人省:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="province" name="province" class="layui-input" lay-verify="required">
					<input type="hidden" id="orderid" name="orderid" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">收货人市:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="city" name="city" class="layui-input" lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">收货人区:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="area" name="area" class="layui-input" lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">详细的地址信息:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" id="addressinfo" name="addressinfo" class="layui-input" lay-verify="required">
				</div>
			</div>
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" lay-filter="editSubmit" lay-submit="">修改提交</button>
			</div>
		</form>
	</div>
	<!--定义数据表格table  -->
	<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
	
	<div id="orderBox" style="display: none; padding: 10px;">
        <table id="orderTable" lay-filter="orderTable">
            <h3 style="text-align: center">订单详情表</h3>
        </table>
    </div>
	
	<!--表格数据里的编辑、查看等操作按钮  -->
	<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs layui-btn-container" lay-event="orderFind"><i class="layui-icon">&#xe642;</i>订单详情</a>
			<a class="layui-btn layui-btn-xs layui-btn-container" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
			{{# if (d.status == 1){}}
				<a class="layui-btn layui-btn-xs layui-btn-container" lay-event="shipments"><i class="layui-icon">&#xe642;</i>待发货</a>	
			{{# } }}
			{{# if (d.status == 0){}}
				<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event=""><i class="layui-icon">&#xe642;</i>待付款</a>	
			{{# } }}
			{{# if (d.status > 1){}}
				<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event=""><i class="layui-icon">&#xe642;</i>已发货</a>	
			{{# } }}
	</script>
	<script>
		layui.use([ 'laydate', 'layer', 'form', 'table', 'tree' ], function() {
			var laydate = layui.laydate //日期组件
			, layer = layui.layer //弹层组件
			, form = layui.form //表单组件
			, tree = layui.tree //树形结构组件
			, $ = layui.jquery //jQuery
			, table = layui.table; //表格组件

			//日期控件
			laydate.render({
				elem : '#beginCreatetime'
			});
			laydate.render({
				elem : '#endCreatetime'
			});

			//渲染表格，填充数据
			table.render({
				elem : '#proTable', //对应上面定义的表格ID
				url : 'findOrder.do', //提交到后台的地址
				method : 'get', //提交方式 get或者post
				even : true, //表格隔行变色
				page : true, //开启分页
				toolbar : '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
				title : '产品表', //表格名称
				cols : [[{
					field: 'ck',
					fixed: 'left',
					type: 'checkbox',
					width: 80
				},{
					field: 'orderid',
					fixed: 'left',
					width: 120,
					title: '订单号',
					sort: true		//开始排序
					
				},{
					field: 'totalprices',	//对应的实体类
					fixed: 'left',	//固定方式
					align:'center', //排列方式
					width: 120,
					title: '总价'	//表头名称
					
				}, {
					field: 'status',	
					title: '状态',
					fixed:'left',
					width: 120,
					templet:function(d){
						if (d.status == 4) {
			            	return '<div style="color:#5FB878;" >已完成</div>';
			            }else if(d.status == 0){
			            	return '<div style="color:#FF5722;" >待付款</div>';
			            }else if(d.status == 1){
			            	return '<div style="color:#FFB800;" >待发货</div>';
			            }else if(d.status == 2){
			            	return '<div style="color:#1E9FFF;" >待收货</div>';
			            }else if(d.status == 3){
			            	return '<div style="color:#2F4056;" >待评价</div>';
			            }else{
			            	return '<div style="color:#c2c2c2;" >000000</div>';
			            }
					}
				}, {
					field: 'username',
					width: 120,
					title: '用户姓名'
				}, {
					field: 'name',
					width: 120,
					title: '收货人姓名'
				}, {
					field: 'phone',
					width: 150,
					title: '手机号码'
				},{
					field: 'province',
					width: 120,
					title: '省'
				}, {
					field: 'city',
					width: 120,
					title: '市'
				},{
					field: 'area',
					width: 120,
					title: '区'
				},{
					field: 'addressinfo',
					width: 200,
					title: '详细住址'
				},{
					field: 'mark',
					width: 270,
					title: '订单的备注'
				},{
					field: 'logisticsMoney',
					width: 120,
					title: '订单的物流运费'
				},{
					field: 'logisticsName',
					width: 200,
					title: '订单的物流名称'
				},{
					field: 'logisticsMessage',
					width: 270,
					title: '订单的物流信息'
				},{
					field: 'createtime',
					width: 200,
					title: '创建时间'
				},{
					field: 'paymentTime',
					width: 200,
					title: '付款时间'
				},{
					field: 'deliveryTime',
					width: 200,
					title: '发货时间'
				},{
					field: 'finishTimeTime',
					width: 200,
					title: '完成时间'
				},{
					fixed: 'right',
					width: 250,
					title: '操作',
					toolbar: '#barDemo'
				}]]
			});
			/*
				条件查询	submit 对应 lay-submit  search 对应 lay-filter
			 */
			form.on('submit(search)', function(data) {
				var field = data.field; //获取所有的输入条件值
				//执行重载
				table.reload('proTable', {
					page : {
						curr : 1
					}, // 重载后回到第一页
					where : field
				// 把所有的输入值传给后台
				});
			});

			//数据表格里的事件监听
			table.on('tool(filterTable)', function(obj) {
				var data = obj.data;//获取当前行的数据

				switch (obj.event) {
				case 'edit': //修改操作

					//数据的回显
					form.val("editForm", data);
					//打开弹层
					layer.open({
						type : 1,
						title : '您正在修改编号【' + data.orderid + '】的信息',
						content : $('#editLayer'),
						area : [ '800px', '600px' ]
					});
					break;
				case 'shipments': //发货操作
					//数据的回显
					form.val("shipmentsForm", data);
					//打开弹层
					layer.open({
						type : 1,
						title : '您正在发送订单号为【' + data.orderid + '】的货物',
						content : $('#shipmentsLayer'),
						area : [ '800px', '600px' ]
					});
					break;
				case 'orderFind': //详情操作
				
					let orderid = data["orderid"];
	 
	                $.ajax({
	                    type: "get",
	                    url: "findOrderdetail.do",
	                    data: {
	                        "orderid": orderid
	                    },
	                    success: function (data) {
	                        if (data.code == 1) {
	                            var data=data.data;
	                            layer.open({
	                                type: 1,
	                                content: $('#orderBox'),
	                                title : '您正在查看订单号为【' + orderid + '】的详细货物',
	                                area: ['700px', '600px'], //宽高
	                                btn: ["确定"],
	                                btn1: function (index){
	                                    layer.close(index);
	                                    window.location.reload();
	                                },
	                                success: function () {
	                                    table.render({
	                                        elem: '#orderTable',
	                                        data:data,
	                                        // url: $("#BasePath").val() + "/teacher/getQiandaoList" //数据接口,
	                                        page: false //关闭分页
	                                        , cols: [[ //表头
	                                            {field: 'id', title: '编号', sort: true, fixed: 'left'},
	                                            {field: 'pname', title: '产品名字', fixed: 'left'},
	                                            {field: 'price', title: '产品单价', fixed: 'left'},
	                                            {field: 'count', title: '产品数量', fixed: 'left'},
	                                            {field: 'totalprice', title: '小计', fixed: 'left'},
	                                            {field: 'size', title: '产品尺寸', fixed: 'left'}
	                                        ]]
	                                    });
	                                }
	                            })
	                        } else {
	                            alert("失败")
	                        }
	                    }
	                })

					break;
				};
			})

			//修改弹层的提交按钮
			form.on('submit(editSubmit)', function(data) {
				$.ajax({
					type : 'post', //提交方式get或post
					url : 'upOrder.do', //提交路径
					data : $("#editForm").serialize(), //参数
					dataType : 'json', //返回的数据类型
					success : function(res) { //提交成功
						layer.closeAll(); //关闭弹层
						layer.alert(res.msg); //提示信息
						table.reload('proTable'); //刷新表格
					},
					error : function() { //提交失败
						alert("系统异常！！")
					}
				});
				return false;
			});
			
			//发货弹层的提交按钮
			form.on('submit(shipmentsSubmit)', function(data) {
				$.ajax({
					type : 'post', //提交方式get或post
					url : 'shipments.do', //提交路径
					data : $("#shipmentsForm").serialize(), //参数
					dataType : 'json', //返回的数据类型
					success : function(res) { //提交成功
						layer.closeAll(); //关闭弹层
						layer.alert(res.msg); //提示信息
						table.reload('proTable'); //刷新表格
					},
					error : function() { //提交失败
						alert("系统异常！！")
					}
				});
				return false;
			});

		});
	</script>
</body>
</html>
